<template>
  <a-modal :open="open" title="收费明细" width="1100px" :footer="false" centered @cancel="onCancel">
    <div class="mb-5 ml-5">
      <div class="flex">
        <LabelValue class="mb-5" label="姓名" :value="formState.brName" />
        <LabelValue class="mb-5" label="性别" :value="formState.brXb" />
        <LabelValue class="mb-5" label="卡号" :value="formState.brId" />
        <LabelValue class="mb-5" label="门诊号" :value="formState.jzbh" />
        <div class="flex">
          <LabelValue class="mb-5" label="票据号" :value="formState.pjhm" />
          <LabelValue class="mb-5" label="收费员" :value="formState.sfymc" />
        </div>
      </div>

      <div class="flex">
        <LabelValue label="票据费用" :value="'￥' + formatAmount(formState.ysje ? formState.ysje : 0)" />
        <LabelValue label="医保支付" :value="'￥' + formatAmount(formState.ybje ? formState.ybje : 0)" />
        <LabelValue label="自费支付" :value="'￥' + formatAmount(formState.zfje ? formState.zfje : 0)" />
        <LabelValue label="分币误差" :value="'￥' + formatAmount(formState.fbyh ? formState.fbyh : 0)" />
        <LabelValue :width="200" label="收费时间" :value="formState.jytime" />
      </div>
    </div>
    <BaseTable :loading="loading" column-code="00001172" :data-source="tableData" bordered :height="500" :scroll="{ x: 1000 }">
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'xh'">
          <div>{{ index + 1 }}</div>
        </template>
        <template v-if="column.dataIndex === 'dj'">
          <div>{{ getToFixed(record.dj) }}</div>
        </template>
        <template v-if="column.dataIndex === 'je'">
          <div>{{ formatAmount(record.je) }}</div>
        </template>
        <template v-if="column.dataIndex === 'mc'">
          <MedicineInfo :value="{ mc: record?.mc, gg: record?.gg, cj: record?.cj }" />
        </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import BaseTable from '@/components/BaseTable'
import LabelValue from '@/components/LabelValue'
import { formatAmount } from '@/utils/format.js'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const formState = ref({})
const { loading, tableData, getData } = useTable({
  url: '/outp/oupCharge/getTollRetrievalDetailsList',
  pagination: false,
  immediate: false,
  params: {},
  formatParams: () => {
    return {
      chargeTotleLsh: formState.value?.lsh,
      type: '1'
    }
  }
})

const getToFixed = (price) => {
  return price === '' || price === null || price === undefined ? '' : price.toFixed(3)
}

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = props.rowData
      getData()
    }
  }
)
</script>

<style lang="less" scoped></style>
